.carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.background-wrapper {
  position: relative;

  .cover {
    position: absolute;
    width: 100%;
  }
}

.progress-wrapper {
  position: absolute;
  top: 30px;
  left: 20px;
  display: flex;
  gap: 5px;
  pointer-events: none;

  &-item {
    @include size(32px, 1px);
    opacity: 0.3;
    background-color: $colorWhite;
    transition: opacity 350ms ease-in-out;
    &.active {
      opacity: 1;
    }
  }
}

.content-wrapper {
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  pointer-events: none;
  transition: opacity 1.2s;
}

$transition-opacity-in-delay: 1.4s;

.text {
  &-title,
  &-subtitle {
    color: $colorWhite;
    font-family: $notoSerif;
    letter-spacing: 0.02em;
  }

  &-title {
    font-size: 36px; // first 36px occurance
    line-height: 42px;
    //text-transform: uppercase;
    margin-bottom: 13px;
  }

  $in-transition-delay: 0s;
  &-title-chunk {
    transform: translateX(-100vw);

    &.active {
      transform: translateX(0);
    }

    @for $i from 0 through 4 {
      &:nth-of-type(#{$i + 1}) {
        transition: transform
          1.2s
          ($i * 0.2s + $in-transition-delay)
          ease-in-out;
      }
    }
  }

  &-subtitle {
    font-size: $paragraph;
    line-height: 20px;
    margin-bottom: 25px;
    transition: opacity 1s (1 * $transition-opacity-in-delay) ease-in-out;
    opacity: 0;

    &.active {
      opacity: 1;
    }
  }
}

.cta-button {
  width: 85px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s (1.5 * $transition-opacity-in-delay) ease-in-out;

  &.active {
    pointer-events: all;
    opacity: 1;
  }
}

.scroll-down {
  &-wrapper {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  &-text {
    font-family: $notoSans;
    font-size: 11px;
    color: $colorWhite;
  }
  &-indicator {
    @include size(1px, 16px);
    position: relative;
    margin: 10px auto 0 auto;
    background-color: rgba($colorWhite, 0.2);

    &--active {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba($colorWhite, 0.7);
      animation: indicator-move 2s ease-in-out infinite;
    }
  }
}

@keyframes indicator-move {
  0% {
    top: 0%;
    bottom: 100%;
  }
  20% {
    top: 0%;
    bottom: 70%;
  }

  70% {
    top: 0%;
    bottom: 70%;
  }

  80% {
    top: 0%;
    bottom: 0%;
  }

  90% {
    top: 70%;
  }

  100% {
    top: 100%;
  }
}
